/*
 * @Descripttion: 
 * @Author: 人生只如初见
 * @Date: 2021-09-24 13:46:35
 * @LastEditors: 人生只如初见
 * @LastEditTime: 2021-09-26 18:25:15
 */
import * as THREE from "three";
import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry'
import Calculate from './calculate'
import { screenToThree } from '../../utils'
import { AddMeshCommand } from '../../commands'
/** 直线道路 */
export class DrawLine extends Calculate {
  constructor(editor) {
    super(editor)
    this.name = '直线';
    this.drawStart = new THREE.Vector2()
    this.drawEnd = new THREE.Vector2()
    this.isMoved = false
    this.points = [this.drawStart, this.drawEnd]

  }
  drawPoint(points) {
    let pointGeometry = new THREE.BufferGeometry()
    points = points.reduce((pre, next) => {
      pre.push(next.x, next.y, 0)
      return pre
    }, [])
    pointGeometry.setFromPoints(points)
    let pointMesh = new THREE.Points(pointGeometry, this.pointMaterial)
    pointMesh.name = '编辑点'
    return pointMesh
  }
  /** 绘制线 */
  drawLine(points) {
    let points1 = points.reduce((pre, next) => {
      pre.push(next.x, next.y, 0)
      return pre
    }, [])
    this.lineMesh.geometry.dispose()
    let geometry = new LineGeometry()
    geometry.setPositions(points1)
    this.lineMesh.geometry = geometry
  }
  /** 绘制面 */
  drawPlane(points) {
    this.roadMesh.geometry.dispose()
    let pointsData = this.getPoint(points, 1)
    let shape = new THREE.Shape(pointsData);
    let shapeGeometry = new THREE.ShapeBufferGeometry(shape);
    this.roadMesh.geometry = shapeGeometry
  }

  /**
   * @function: 监听事件
   */
  listen() {
    super.listen()
    this.editor.container.addEventListener('pointerdown', this.handleMouseDown)
    this.editor.container.addEventListener('pointerup', this.handleMouseUp)
  }
  /**
   * @function: 销毁事件
   */
  dispose() {
    super.dispose()
    this.editor.container.removeEventListener('pointerdown', this.handleMouseDown)
    this.editor.container.removeEventListener('pointermove', this.handleMouseMove)
    this.editor.container.removeEventListener('pointerup', this.handleMouseUp)
    this.editor.setState('none')
  }
  handleMouseDown = (event) => {
    if (event.button !== 0) return
    var [x, y] = screenToThree(event, this.editor)
    this.drawStart.set(x, y)
    this.editor.container.addEventListener('pointermove', this.handleMouseMove)
  }
  handleMouseMove = (event) => {
    if (!this.drawStart.x) return
    let [x, y] = screenToThree(event, this.editor)
    this.drawEnd.set(x, y)
    let points = [this.drawStart, this.drawEnd]
    this.drawLine(points)
    this.drawPlane(points)
    this.editor.update()

  }
  handleMouseUp = () => {
    let roadMesh = this.roadMesh.clone()
    let lineMesh = this.lineMesh.clone()
    roadMesh.userData = {
      pointsData: this.points  // 把鼠标点击的点位数据保存到mesh中，选中时渲染出线和点给用户编辑
    }
    let RoadGroup = new THREE.Group()
    RoadGroup.add(roadMesh, lineMesh)
    RoadGroup.name = '道路分组'
    console.log('RoadGroup',RoadGroup);
    this.editor.execute(new AddMeshCommand(RoadGroup))
    this.dispose()
  }
}
